<!-- 工作经历页面 -->
<template>
  <div>
    <van-nav-bar fixed placeholder title="登记" left-arrow @click-left="onClickLeft" />
    <div class="work-info">
      <div class="info">
        <div class="work-title">
          主要工作经历
        </div>
        <div class="work-btn" @click="addWork">
          + 添加
        </div>
      </div>
    </div>
    <div class="work-tabulation">
      <work-list ref="work" :work-list="workList" @experienceList="experienceList" />
    </div>
    <div v-if="showSubmit" class="workBtn">
      <van-button size="large" :class="showSubmit?'submit':'noSubmit'" round @click="submitFamily">
        确认并提交
      </van-button>
    </div>
    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" />
  </div>
</template>
<script>
import workList from './work-list.vue'
export default {
  components: { workList },
  props: {

  },
  onLoad() {
    const work = uni.getStorageSync('work')
    if (work.length > 0) {
      this.showSubmit = true
    } else {
      this.showSubmit = false
    }
    if (work) {
      this.workList = work
    }
  },
  data() {
    return {
      showSubmit: false,
      workList: [],
    }
  },
  methods: {
    // 返回上一页
    onClickLeft() {
      uni.navigateBack()
    },
    // 添加成员
    addWork() {
      this.$refs.work.open()
    },
    submitFamily() {
      uni.setStorageSync('work', this.workList)
      uni.navigateBack({
        url: '/package-guest/pages/info-regist/info-write/index',
      })
    },
    experienceList(list) {
      this.workList = list
      if (this.workList.length > 0) {
        this.showSubmit = true
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.work-info{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    .info{
        width: 90%;
        padding: 0px 0px 0px 10px;
        margin: 15px 0px 0px 0px;
        border-left: 2px solid #739ECA;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .work-title{
            color: #000;
            font-size: 16px;
            font-weight: 600;
        }
        .work-btn{
            color: #739ECA;
            font-size: 14px;
        }
    }
}
.workBtn{
  text-align: center;
  padding-top: 15%;
  padding-bottom: 10%;
  width: 80%;
  margin: 0 auto;
}
</style>
<style lang="scss">
.workBtn{
  .noSubmit{
    .van-button--round {
      height: 36px;
      width: 75%;
      background: #ccc !important;
      color: #fff !important;
      font-size: 16px !important;
    }
  }
  .submit{
    .van-button--round {
      height: 36px;
      width: 75%;
      background: #029b00!important;
      color: #fff !important;
      font-size: 16px !important;
    }
  }
}
</style>
